<template>
  <div class="page-wrapper yljy-wrapper">
    <!-- 雨量检验 -->
    <!-- 导航 -->
    <navbar />
    <!-- 侧边栏 -->
    <sidebar class="sidebar-container" />
    <!-- 当前位置 -->
    <div class="here-am-i">
      <span>当前位置：</span>
      <breadcrumb id="breadcrumb-container" />
    </div>
    <!-- 子组件 -->
    <div class="yljy-content">
      <keep-alive :include="cachedViews">
        <router-view :key="key" />
      </keep-alive>
    </div>
  </div>
</template>

<script>
import Navbar from '@/components/Navbar'
import Sidebar from '@/components/Sidebar'
import Breadcrumb from '@/components/Breadcrumb'
export default {
  name: 'Yljy',
  components: { Navbar, Sidebar, Breadcrumb },
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews
    },
    key() {
      return this.$route.path
    }
  }
}
</script>

<style lang="scss">
.yljy-wrapper {
  height: 100%;
  background-color: #eee;
  .here-am-i {
    margin-top: 100px;
    margin-left: 15%;
  }
  .yljy-content {
    padding: 1em 0 10px;
    margin: 0 auto;
    width: 70%;
    height: calc(100% - 125px);
    .inspect-search,
    .inspect-display {
      background-color: #fff;
    }
    .inspect-search {
      padding: 1em;
      margin-bottom: 10px;
      max-height: 145px;
      .search-form-wrapper {
        max-height: 100%;
        overflow-y: auto;
        border: none;
      }
    }
    .inspect-display {
      width: 100%;
      flex: 1;
      overflow: hidden;
      .inspect-btns {
        display: flex;
        justify-content: space-between;
        padding: 2em 2em 1em;

        .inspect-display-btns {
          .inspect-display-btn {
            width: 120px;
          }
          .el-button--primary {
            background-color: rgb(51, 133, 255);
          }
        }

        .inspect-download-btn {
          width: 84px;
          box-shadow: 0px 2px 4px 0px rgba(92, 91, 91, 0.4);
          border-radius: 4px;
          background-image: -moz-linear-gradient(
            0deg,
            rgb(49, 184, 167) 0%,
            rgb(61, 219, 165) 99%
          );
          background-image: -webkit-linear-gradient(
            0deg,
            rgb(49, 184, 167) 0%,
            rgb(61, 219, 165) 99%
          );
          background-image: -ms-linear-gradient(
            0deg,
            rgb(49, 184, 167) 0%,
            rgb(61, 219, 165) 99%
          );
          &:hover,
          &:focus {
            box-shadow: none;
          }
        }

        .inspect-chart-btns {
        }
      }

      .inspect-table-wrapper {
        height: calc(100% - 70px);
        .datagrid-table-wrapper {
          height: calc(100% - 70px);
        }
        // .datagrid-table {
        //   max-height: calc(100% - 30px);
        // }
      }

      .inspect-chart-wrapper {
        width: 100%;
        padding: 0 2em;
        height: calc(100% - 70px);

        .inspect-chart-btns {
          padding-bottom: 1em;
          .inspect-chart-btn:first-of-type {
            border-top-left-radius: 14px;
            border-bottom-left-radius: 14px;
          }
          .inspect-chart-btn:last-of-type {
            border-top-right-radius: 14px;
            border-bottom-right-radius: 14px;
          }
        }

        .inspect-chart-box {
          width: 100%;
          height: calc(100% - 50px);
        }
      }
    }

    th {
      background-color: #ecf1f8 !important;
    }
  }
}
</style>
